<template>
  <div>
    <a-table :dataSource="dataSource" :columns="columns" :pagination="false" size="middle">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'authorizer_info'">
          <template v-if="text">
            <img :src="text.head_img" height="30px" />
            {{ text.nick_name }}
          </template>
        </template>
        <template v-if="column.dataIndex === 'business_info'">
          <template v-if="record.authorizer_info">
            {{ record.authorizer_info.business_info.open_pay == 1 ? '是' : '' }}
          </template>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-button type="link" @click="showEwm(record.authorizer_info.qrcode_url)">二维码</a-button>
          <a-button type="link" @click="showEwm_ty(record.authorizerAppId)">体验版</a-button>
          <a-button type="link" @click="showDetail(record)">详情</a-button>
        </template>
      </template>
    </a-table>
  </div>

  <!-- 详情 -->
  <a-drawer v-model:open="open" title="详情" placement="right" width="1000px">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-drawer>
</template>

<script setup>
import { ref, reactive, createVNode } from 'vue';
import api from '@/config/api.js';
import { Modal } from 'ant-design-vue';

const open = ref(false);
const dataSource = ref([]);
const columns = reactive([
  {
    title: 'authorizerAppId',
    dataIndex: 'authorizerAppId',
    width: 200,
  },
  {
    title: 'tenant_id',
    dataIndex: 'tenant_id',
    width: 200,
  },
  {
    title: '是否开通支付',
    dataIndex: 'business_info',
    width: 120,
  },
  {
    title: '小程序名称',
    dataIndex: 'authorizer_info',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 240,
  },
]);

api.getList().then((d) => {
  let arr = d.data;
  arr = arr.map((item) => {
    let info = (item.info && JSON.parse(item.info)) || {};
    return {
      ...item,
      ...info,
    };
  });
  dataSource.value = arr;
});

// 获取小程序二维码
const showEwm = (img) => {
  window.open(img);
};

// 获取体验版二维码
const showEwm_ty = (appid) => {
  api.getQrcode(appid).then((d) => {
    Modal.confirm({
      title: '体验版二维码',
      content: createVNode('img', { src: d.data, style: 'height:300px;' }),
    });
  });
};

// 查看详情
const showDetail = (record) => {
  open.value = true;
};
</script>

<style lang="less" scoped></style>
